<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <div>
                    <el-input placeholder="搜索" suffix-icon="el-icon-search" v-model="searchContent">
                    </el-input>
                </div>
                <div>
                    <el-button type="primary">新增</el-button>
                    <el-button type="danger">删除</el-button>
                </div>
            </div>
            <div class="text item">
                <el-table :data="userList" border style="width: 100%;" ref="multipleTable"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="id" label="ID" width="180">
                    </el-table-column>
                    <el-table-column prop="username" label="账号" width="150">
                    </el-table-column>
                    <el-table-column prop="name" label="昵称" width="150">
                    </el-table-column>
                    <el-table-column prop="phone" label="联系方式" width="150">
                    </el-table-column>
                    <el-table-column prop="avatar" label="头像" width="100">
                        <template slot-scope="scope">
                            <el-avatar :size="50" :src="scope.row.avatar"></el-avatar>
                        </template>
                    </el-table-column>
                    <el-table-column prop="age" label="年龄" width="80">
                    </el-table-column>
                    <el-table-column prop="sex" label="性别" width="80">
                        <template slot-scope="scope">
                            <span v-show="scope.row.sex == 1">男</span>
                            <span v-show="scope.row.sex == 2">女</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="80">
                        <template slot-scope="scope">
                            <el-tag type="success" v-show="scope.row.status == 1">正常</el-tag>
                            <el-tag type="danger" v-show="scope.row.status == 2">禁用</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="140">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="showAdminMenu(scope.row)">查看菜单</el-button>
                            <el-button type="text" size="small" @click="showUserRole(scope.row)">分配角色</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination background layout="prev, pager, next" :total="1000">
                </el-pagination>
            </div>
        </el-card>
        <el-dialog title="用户菜单" :visible.sync="showUserAdminMenu" width="30%">
            <div v-for="item, index in userAdminMenu" :key="index">{{ item.title }}</div>
        </el-dialog>
        <el-dialog title="分配角色" :visible.sync="showUserRoleDialog" width="30%">
            <el-select v-model="userRoleList" multiple placeholder="请选择">
                <el-option v-for="item in allRoleList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
            </el-select>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showUserRoleDialog = false">取 消</el-button>
                <el-button type="primary" @click="submitRole" :loading="loading">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'UserPermission',
    data() {
        return {
            // 是否加载
            loading: false,
            // 搜索内容
            searchContent: "",
            // 多选数据
            multipleSelection: [],
            // 当前页数
            currentPag: 1,
            // 每页大小
            pageSize: 10,
            // 总页数
            totalPage: 0,
            // 是否展示用户菜单
            showUserAdminMenu: false,
            // 是否展示分配角色
            showUserRoleDialog: false,
            // 分配用户角色所需的用户角色列表
            userRoleList: [],
            // 所有的角色列表
            allRoleList: [],
            // 操作的用户信息
            opUserInfo: {}

        }
    },
    mounted() {
        this.init()
    },
    methods: {
        // 获取表格数据
        async init() {
            let res = await this.$store.dispatch('getUserPag')
            if (!res.success) this.$myfun.resError(res)
        },
        // 查看菜单
        async showAdminMenu(data) {
            this.opUserInfo = data
            let res = await this.$store.dispatch('getUserAdminMenu', {
                username: this.opUserInfo.username
            })
            if (!res.success) this.$myfun.resError(res)
            else this.showUserAdminMenu = true
        },
        // 多选
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        // 展示分配角色
        async showUserRole(data) {
            this.opUserInfo = data
            let res = await this.$store.dispatch("getUserRoleAndAll", {
                username: this.opUserInfo.username
            })
            if (res.success) {
                this.userRoleList = res.data.userRoleList
                this.allRoleList = res.data.allRoleList
                this.showUserRoleDialog = true
            }
            else this.$myfun.resError(res)
        },
        // 保存分配角色
        async submitRole() {
            this.loading = true
            let data = {
                userRoleList: this.userRoleList,
                userId: this.opUserInfo.id,
                username: this.opUserInfo.username
            }
            let res = await this.$store.dispatch("saveUserRole", data)
            this.loading = false
            if (res.success) {
                this.$message.success(res.message)
                this.showUserRoleDialog = false
            }
            else this.$myfun.resError(res)
        }
    },
    computed: {
        userList() {
            return this.$store.state.user.userList
        },
        userAdminMenu() {
            return this.$store.state.user.userAdminMenu
        },
    },

}
</script>

<style scoped>
.clearfix {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pagination {
    padding: 20px 0 10px 0;
    text-align: center;
}
</style>